<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>

<!DOCTYPE html>
<!-- saved from url=(0051)${ctx}/sys/user/list -->
<html style="overflow-x:auto;overflow-y:auto;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=9,IE=10">


    <meta name="decorator" content="default">

</head>
<body id="" class=" pace-done" style=""><i id="btnMenu" class="icon-th-list"
                                           style="cursor:pointer;float:right;margin:10px;"></i>
<div id="menuContent"></div>
<div class="pace  pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
        <div class="pace-progress-inner"></div>
    </div>
    <div class="pace-activity"></div>
</div>


<!-- 0:隐藏tip, 1隐藏box,不设置显示全部 -->


<script type="text/javascript">top.$.jBox.closeTip();</script>

<!-- 查询条件 -->
<div class="row">
    <div class="col-sm-12">
        <form id="searchForm" class="form-inline" action="${ctx}/sys/user/list"
              method="post">
            <input id="pageNo" name="pageNo" type="hidden" value="1">
            <input id="pageSize" name="pageSize" type="hidden" value="10">


            <input id="orderBy" name="orderBy" type="hidden" value="">

            <script type="text/javascript">
                $(document).ready(function () {
                    var orderBy = $("#orderBy").val().split(" ");
                    $(".sort-column").each(function () {
                        $(this).html($(this).html() + " <i class=\"fa fa-sort\"></i>");
                    });
                    $(".sort-column").each(function () {
                        if ($(this).hasClass(orderBy[0])) {
                            orderBy[1] = orderBy[1] && orderBy[1].toUpperCase() == "DESC" ? "down" : "up";
                            $(this).find("i").remove();
                            $(this).html($(this).html() + " <i class=\"fa fa-sort-" + orderBy[1] + "\"></i>");
                        }
                    });
                    $(".sort-column").click(function () {
                        var order = $(this).attr("class").split(" ");
                        var sort = $("#orderBy").val().split(" ");
                        for (var i = 0; i < order.length; i++) {
                            if (order[i] == "sort-column") {
                                order = order[i + 1];
                                break;
                            }
                        }
                        if (order == sort[0]) {
                            sort = (sort[1] && sort[1].toUpperCase() == "DESC" ? "ASC" : "DESC");
                            $("#orderBy").val(order + " DESC" != order + " " + sort ? "" : order + " " + sort);
                        } else {
                            $("#orderBy").val(order + " ASC");
                        }
                        sortOrRefresh();
                    });
                });
            </script><!-- 支持排序 -->
            <div class="form-group">
                <span>归属公司：</span>


                <input id="companyId" name="company.id" class=" form-control input-sm" type="hidden" value="">
                <div class="input-group">
                    <input id="companyName" name="company.name" readonly="readonly" type="text" value=""
                           data-msg-required="" class=" form-control input-sm" style="">
       		 <span class="input-group-btn">
	       		 <button type="button" id="companyButton" class="btn  btn-sm   btn-primary  "><i
                         class="fa fa-search"></i>
	             </button>
       		 </span>

                </div>
                <label id="companyName-error" class="error" for="companyName" style="display:none"></label>
                <script type="text/javascript">
                    $("#companyButton, #companyName").click(function () {
                        // 是否限制选择，如果限制，设置为disabled
                        if ($("#companyButton").hasClass("disabled")) {
                            return true;
                        }
                        // 正常打开
                        top.layer.open({
                            type: 2,
                            area: ['300px', '420px'],
                            title: "选择公司",
                            ajaxData: {selectIds: $("#companyId").val()},
                            content: "${sPath}/tag/treeselect?url=" + encodeURIComponent("/sys/office/treeData?type=1") + "&module=&checked=&extId=&isAll=",
                            btn: ['确定', '关闭']
                            , yes: function (index, layero) { //或者使用btn1
                                var tree = layero.find("iframe")[0].contentWindow.tree;//h.find("iframe").contents();
                                var ids = [], names = [], nodes = [];
                                if ("" == "true") {
                                    nodes = tree.getCheckedNodes(true);
                                } else {
                                    nodes = tree.getSelectedNodes();
                                }
                                for (var i = 0; i < nodes.length; i++) {//
                                    ids.push(nodes[i].id);
                                    names.push(nodes[i].name);//
                                    break; // 如果为非复选框选择，则返回第一个选择
                                }
                                $("#companyId").val(ids.join(",").replace(/u_/ig, ""));
                                $("#companyName").val(names.join(","));
                                $("#companyName").focus();
                                top.layer.close(index);
                            },
                            cancel: function (index) { //或者使用btn2
                                //按钮【按钮二】的回调
                            }
                        });

                    });
                </script>
                <span>登录名：</span>
                <input id="loginName" name="loginName" class=" form-control input-sm" type="text" value=""
                       maxlength="50">
                <span>归属部门：</span>


                <input id="officeId" name="office.id" class=" form-control input-sm" type="hidden" value="">
                <div class="input-group">
                    <input id="officeName" name="office.name" readonly="readonly" type="text" value=""
                           data-msg-required="" class=" form-control input-sm" style="">
       		 <span class="input-group-btn">
	       		 <button type="button" id="officeButton" class="btn  btn-sm   btn-primary  "><i
                         class="fa fa-search"></i>
	             </button>
       		 </span>

                </div>
                <label id="officeName-error" class="error" for="officeName" style="display:none"></label>
                <script type="text/javascript">
                    $("#officeButton, #officeName").click(function () {
                        // 是否限制选择，如果限制，设置为disabled
                        if ($("#officeButton").hasClass("disabled")) {
                            return true;
                        }
                        // 正常打开
                        top.layer.open({
                            type: 2,
                            area: ['300px', '420px'],
                            title: "选择部门",
                            ajaxData: {selectIds: $("#officeId").val()},
                            content: "${sPath}/tag/treeselect?url=" + encodeURIComponent("/sys/office/treeData?type=2") + "&module=&checked=&extId=&isAll=",
                            btn: ['确定', '关闭']
                            , yes: function (index, layero) { //或者使用btn1
                                var tree = layero.find("iframe")[0].contentWindow.tree;//h.find("iframe").contents();
                                var ids = [], names = [], nodes = [];
                                if ("" == "true") {
                                    nodes = tree.getCheckedNodes(true);
                                } else {
                                    nodes = tree.getSelectedNodes();
                                }
                                for (var i = 0; i < nodes.length; i++) {//
                                    if (nodes[i].isParent) {
                                        //top.$.jBox.tip("不能选择父节点（"+nodes[i].name+"）请重新选择。");
                                        //layer.msg('有表情地提示');
                                        top.layer.msg("不能选择父节点（" + nodes[i].name + "）请重新选择。", {icon: 0});
                                        return false;
                                    }//
                                    ids.push(nodes[i].id);
                                    names.push(nodes[i].name);//
                                    break; // 如果为非复选框选择，则返回第一个选择
                                }
                                $("#officeId").val(ids.join(",").replace(/u_/ig, ""));
                                $("#officeName").val(names.join(","));
                                $("#officeName").focus();
                                top.layer.close(index);
                            },
                            cancel: function (index) { //或者使用btn2
                                //按钮【按钮二】的回调
                            }
                        });

                    });
                </script>
                <span>姓&nbsp;&nbsp;&nbsp;名：</span>
                <input id="name" name="name" class=" form-control input-sm" type="text" value="" maxlength="50">

            </div>
        </form>
        <br>
    </div>
</div>

<!-- 工具栏 -->
<div class="row">
    <div class="col-sm-12">
        <div class="pull-left">


            <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" onclick="add()" title="添加">
                <i class="fa fa-plus"></i> 添加
            </button>

            <script type="text/javascript">
                function add() {
                    openDialog("新增" + '用户', "${sPath}/sys/user/form", "800px", "620px", "officeContent");
                }
            </script><!-- 增加按钮 -->


            <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" onclick="edit()"
                    title="修改"><i class="fa fa-file-text-o"></i> 修改
            </button>


            <script type="text/javascript">
                $(document).ready(function () {
                    $('#contentTable thead tr th input.i-checks').on('ifChecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
                        $('#contentTable tbody tr td input.i-checks').iCheck('check');
                    });

                    $('#contentTable thead tr th input.i-checks').on('ifUnchecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
                        $('#contentTable tbody tr td input.i-checks').iCheck('uncheck');
                    });

                });

                function edit() {

                    var size = $("#contentTable tbody tr td input.i-checks:checked").size();
                    if (size == 0) {
                        top.layer.alert('请至少选择一条数据!', {icon: 0, title: '警告'});
                        return;
                    }

                    if (size > 1) {
                        top.layer.alert('只能选择一条数据!', {icon: 0, title: '警告'});
                        return;
                    }
                    var id = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("id");
                    openDialog("修改" + '用户', "${sPath}/sys/user/form?id=" + id, "800px", "680px", "officeContent");
                }
            </script><!-- 编辑按钮 -->


            <button class="btn btn-white btn-sm" onclick="deleteAll()" data-toggle="tooltip" data-placement="top"><i
                    class="fa fa-trash-o"> 删除</i>
            </button>



            <button id="btnImport" class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" title="导入">
                <i class="fa fa-folder-open-o"></i> 导入
            </button>
            <div id="importBox" class="hide">
                <form id="importForm" action="${ctx}/sys/user/import" method="post"
                      enctype="multipart/form-data" style="padding-left:20px;text-align:center;"
                      onsubmit="loading('正在导入，请稍等...');"><br>
                    <input id="uploadFile" name="file" type="file" style="width:330px">导入文件不能超过5M，仅允许导入“xls”或“xlsx”格式文件！<br>　　


                </form>
            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#btnImport").click(function () {
                        top.layer.open({
                            type: 1,
                            area: [500, 300],
                            title: "导入数据",
                            content: $("#importBox").html(),
                            btn: ['下载模板', '确定', '关闭'],
                            btn1: function (index, layero) {
                                window.location.href = '${sPath}/sys/user/import/template';
                            },
                            btn2: function (index, layero) {
                                var inputForm = top.$("#importForm");
                                var top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
                                inputForm.attr("target", top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示
                                top.$("#importForm").submit();
                                top.layer.close(index);
                            },

                            btn3: function (index) {
                                top.layer.close(index);
                            }
                        });
                    });

                });

            </script><!-- 导入按钮 -->


            <button id="btnExport" class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" title="导出">
                <i class="fa fa-file-excel-o"></i> 导出
            </button>
            <script type="text/javascript">
                $(document).ready(function () {

                    $("#btnExport").click(function () {
                        top.layer.confirm('确认要导出Excel吗?', {icon: 3, title: '系统提示'}, function (index) {
                            //do something
                            //导出之前备份
                            var url = $("#searchForm").attr("action");
                            var pageNo = $("#pageNo").val();
                            var pageSize = $("#pageSize").val();
                            //导出excel
                            $("#searchForm").attr("action", "${sPath}/sys/user/export");
                            $("#pageNo").val(-1);
                            $("#pageSize").val(-1);
                            $("#searchForm").submit();

                            //导出excel之后还原
                            $("#searchForm").attr("action", url);
                            $("#pageNo").val(pageNo);
                            $("#pageSize").val(pageSize);
                            top.layer.close(index);
                        });
                    });

                });


            </script><!-- 导出按钮 -->

            <button class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" onclick="sortOrRefresh()"
                    title="刷新"><i class="glyphicon glyphicon-repeat"></i> 刷新
            </button>

        </div>
        <div class="pull-right">
            <button class="btn btn-primary btn-rounded btn-outline btn-sm " onclick="search()"><i
                    class="fa fa-search"></i> 查询
            </button>
            <button class="btn btn-primary btn-rounded btn-outline btn-sm " onclick="reset()"><i
                    class="fa fa-refresh"></i> 重置
            </button>
        </div>
    </div>
</div>

<table id="contentTable" class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
    <thead>
    <tr>
        <th><input type="checkbox" class="i-checks"></th>
        <th class="sort-column login_name">登录名</th>
        <th class="sort-column name">姓名</th>
        <th class="sort-column phone">电话</th>
        <th class="sort-column mobile">手机</th>
        <th class="sort-column c.name">归属公司</th>
        <th class="sort-column o.name">归属部门</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    <tr>
        <td> <input type="checkbox" id="1" class="i-checks"></td>
        <td><a  href="#" onclick="openDialogView('查看用户', '${ctx}/sys/user/form?id=1','800px', '680px')">admin</a></td>
        <td>admin</td>
        <td>4444</td>
        <td>rr</td>
        <td>总公司</td>
        <td>技术部</td>
        <td>

            <a href="#" onclick="openDialogView('查看用户', '${ctx}/sys/user/form?id=1','800px', '680px')" class="btn btn-info btn-xs" ><i class="fa fa-search-plus"></i> 查看</a>


            <a href="#" onclick="openDialog('修改用户', '${ctx}/sys/user/form?id=1','800px', '700px', 'officeContent')" class="btn btn-success btn-xs" ><i class="fa fa-edit"></i> 修改</a>


            <a href="${ctx}/sys/user/delete?id=1" onclick="return confirmx('确认要删除该用户吗？', this.href)" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i> 删除</a>

        </td>
    </tr>

    <tr>
        <td> <input type="checkbox" id="0fb8ebbff20a46029596806aa077d3c2" class="i-checks"></td>
        <td><a  href="#" onclick="openDialogView('查看用户', '${ctx}/sys/user/form?id=0fb8ebbff20a46029596806aa077d3c2','800px', '680px')">fbb</a></td>
        <td>范冰冰</td>
        <td></td>
        <td></td>
        <td>总公司</td>
        <td>技术部</td>
        <td>

            <a href="#" onclick="openDialogView('查看用户', '${ctx}/sys/user/form?id=0fb8ebbff20a46029596806aa077d3c2','800px', '680px')" class="btn btn-info btn-xs" ><i class="fa fa-search-plus"></i> 查看</a>


            <a href="#" onclick="openDialog('修改用户', '${ctx}/sys/user/form?id=0fb8ebbff20a46029596806aa077d3c2','800px', '700px', 'officeContent')" class="btn btn-success btn-xs" ><i class="fa fa-edit"></i> 修改</a>


            <a href="${ctx}/sys/user/delete?id=0fb8ebbff20a46029596806aa077d3c2" onclick="return confirmx('确认要删除该用户吗？', this.href)" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i> 删除</a>

        </td>
    </tr>

    <tr>
        <td> <input type="checkbox" id="f7cc1c7e6f494818adffe1de5f2282fb" class="i-checks"></td>
        <td><a  href="#" onclick="openDialogView('查看用户', '${ctx}/sys/user/form?id=f7cc1c7e6f494818adffe1de5f2282fb','800px', '680px')">zw</a></td>
        <td>赵薇</td>
        <td></td>
        <td></td>
        <td>总公司</td>
        <td>技术部</td>
        <td>

            <a href="#" onclick="openDialogView('查看用户', '${ctx}/sys/user/form?id=f7cc1c7e6f494818adffe1de5f2282fb','800px', '680px')" class="btn btn-info btn-xs" ><i class="fa fa-search-plus"></i> 查看</a>


            <a href="#" onclick="openDialog('修改用户', '${ctx}/sys/user/form?id=f7cc1c7e6f494818adffe1de5f2282fb','800px', '700px', 'officeContent')" class="btn btn-success btn-xs" ><i class="fa fa-edit"></i> 修改</a>


            <a href="${ctx}/sys/user/delete?id=f7cc1c7e6f494818adffe1de5f2282fb" onclick="return confirmx('确认要删除该用户吗？', this.href)" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i> 删除</a>

        </td>
    </tr>

    </tbody>
</table>

<div class="fixed-table-pagination" style="display: block;">
    <div class="pull-left pagination-detail"><span class="pagination-info">显示第 1 到第 3 条记录，总共 3 条记录</span><span
            class="page-list">每页显示 <span class="btn-group dropup"><button type="button"
                                                                          class="btn btn-default  btn-outline dropdown-toggle"
                                                                          data-toggle="dropdown"
                                                                          aria-expanded="false"><span class="page-size">10</span> <span
            class="caret"></span></button><ul class="dropdown-menu" role="menu"><li class="active"><a
            href="javascript:page(1,10,'');">10</a></li><li class=""><a
            href="javascript:page(1,25,'');">25</a></li><li class=""><a
            href="javascript:page(1,50,'');">50</a></li><li class=""><a
            href="javascript:page(1,100,'');">100</a></li></ul></span> 条记录</span></div>
    <div class="pull-right pagination-roll">
        <ul class="pagination pagination-outline">
            <li class="paginate_button previous disabled"><a href="javascript:"><i class="fa fa-angle-double-left"></i></a>
            </li>
            <li class="paginate_button previous disabled"><a href="javascript:"><i class="fa fa-angle-left"></i></a>
            </li>
            <li class="paginate_button active"><a href="javascript:">1</a></li>
            <li class="paginate_button next disabled"><a href="javascript:"><i class="fa fa-angle-right"></i></a></li>
            <li class="paginate_button next disabled"><a href="javascript:"><i class="fa fa-angle-double-right"></i></a>
            </li>
        </ul>
    </div>
</div>
<!-- pagination的css样式设定-->
<style>
    .fixed-table-pagination div.pagination,
    .fixed-table-pagination div.pagination-roll,
    .fixed-table-pagination .pagination-detail {
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .fixed-table-pagination div.pagination-roll .pagination,
    .fixed-table-pagination div.pagination .pagination {
        margin: 0;
    }

    .fixed-table-pagination .pagination a {
        padding: 6px 12px;
        line-height: 1.428571429;
    }

    .fixed-table-pagination .pagination-info {
        line-height: 34px;
        margin-right: 5px;
    }

    .fixed-table-pagination .btn-group {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }

    .fixed-table-pagination .dropup .dropdown-menu {
        margin-bottom: 0;
    }

    .fixed-table-pagination .page-list {
        display: inline-block;
    }

</style>


<script type="text/javascript">//<!-- 无框架时，左上角显示菜单图标按钮。
if (!(self.frameElement && self.frameElement.tagName == "IFRAME")) {
    $("body").prepend("<i id=\"btnMenu\" class=\"icon-th-list\" style=\"cursor:pointer;float:right;margin:10px;\"></i><div id=\"menuContent\"></div>");
    $("#btnMenu").click(function () {

        top.layer.open({
            type: 2,
            area: ['300px', '350px'],
            content: 'get:${sPath}/sys/menu/treeselect;JSESSIONID=2ed84930f9414cc4b877a5698f84ac97' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        });
        //top.$.jBox('get:${sPath}/sys/menu/treeselect;JSESSIONID=2ed84930f9414cc4b877a5698f84ac97', {title:'选择菜单', buttons:{'关闭':true}, width:300, height: 350, top:10});
        //if ($("#menuContent").html()==""){$.get("${sPath}/sys/menu/treeselect", function(data){$("#menuContent").html(data);});}else{$("#menuContent").toggle(100);}
    });
}//-->
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#contentTable thead tr th input.i-checks').on('ifChecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
            $('#contentTable tbody tr td input.i-checks').iCheck('check');
        });

        $('#contentTable thead tr th input.i-checks').on('ifUnchecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
            $('#contentTable tbody tr td input.i-checks').iCheck('uncheck');
        });

    });

    function deleteAll() {

        // var url = $(this).attr('data-url');
        var str = "";
        var ids = "";
        $("#contentTable tbody tr td input.i-checks:checkbox").each(function () {
            if (true == $(this).is(':checked')) {
                str += $(this).attr("id") + ",";
            }
        });
        if (str.substr(str.length - 1) == ',') {
            ids = str.substr(0, str.length - 1);
        }
        if (ids == "") {
            top.layer.alert('请至少选择一条数据!', {icon: 0, title: '警告'});
            return;
        }
        top.layer.confirm('确认要彻底删除数据吗?', {icon: 3, title: '系统提示'}, function (index) {
            window.location = "${sPath}/sys/user/deleteAll?ids=" + ids;
            top.layer.close(index);
        });


    }
</script><!-- 删除按钮 -->


</body>
</html>